<template>
  <el-card>
    <BreadCrumb />
    <el-form ref="FormRef" :model="form" :rules="FormRules" label-width="120px">
      <el-form-item label="当前学期">
        <el-select
          v-model="selectSemesterId"
          placeholder="请选择当前学期"
          @change="handleSelectChange"
        >
          <el-option
            v-for="item in semesterList"
            :key="item.id"
            :label="item.semesterName"
            :value="item.id"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="学期名称" prop="semesterName">
        <el-input v-model="form.semesterName" autocomplete="off" />
      </el-form-item>
      <el-form-item label="起始日期" prop="semesterOriginDate">
        <el-date-picker
          v-model="form.semesterOriginDate"
          type="date"
          placeholder="选择日期"
          format="yyyy-MM-dd"
        />
      </el-form-item>
      <el-form-item label="总周数" prop="semesterWeekTotal">
        <el-input
          v-model="form.semesterWeekTotal"
          autocomplete="off"
        />
      </el-form-item>
      <el-form-item class="form_button">
        <el-button type="primary" :disabled="btnDisabled" @click="saveOrUpdate()">
          {{ isAdd === true ? '添加' : '更新' }}
        </el-button>
      </el-form-item>
    </el-form>
  </el-card>
</template>

<script>
import BreadCrumb from '@/components/BreadCrumb'
import { isConfirm } from '@/utils/confirm'
import { getSemester, addSemester, updateSemester, setCurrentSemester, getSemesterById } from '@/api/semesterApi'
export default {
  components: {
    BreadCrumb
  },
  data() {
    return {
      // 学期表单
      form: {
        semesterName: '',
        semesterOriginDate: '',
        semesterWeekTotal: '',
        id: ''
      },
      // 学期表单验证规则
      FormRules: {
        semesterName: [
          { required: true, message: '请输入学期名称', trigger: 'blur' }
        ],
        semesterOriginDate: [
          { required: true, message: '请输入学期起始日期', trigger: 'blur' }
        ],
        semesterWeekTotal: [
          { required: true, message: '请输入学期周数', trigger: 'blur' }
        ]
      },
      // 是否是添加排课学期操作
      isAdd: true,
      // 学期数据
      semesterList: [],
      // 下拉选择器绑定学期 id
      selectSemesterId: '',
      // 当前学期 id
      currentSemesterId: '',
      // 按钮是否禁用
      btnDisabled: true
    }
  },
  created() {
    // 初始化学期数据
    this.getSemester()
    this.initForm()
    // 解禁按钮
    this.btnDisabled = false
  },
  methods: {
    // 初始化表单数据
    async initForm() {
      // 如果当前路由是添加操作，则直接返回
      if (this.$route.path.indexOf('/semester/add') !== -1) {
        this.isAdd = true
        return
      }
      // 当前路由进行的是修改操作
      this.isAdd = false
      // 获取当前路由携带参数 id,并根据查询该学期对应信息
      const { data: res } = await getSemesterById(this.$route.params.semesterId)
      this.form = res.item
    },
    // 获取学期信息
    async getSemester() {
      const { data: res } = await getSemester()
      this.semesterList = res.items
      // 获取到当前主学期，并赋值
      this.semesterList.forEach(item => {
        if (item.isCurrentSemester) {
          this.selectSemesterId = item.id
          // 记录当前主学期
          this.currentSemesterId = item.id
        }
      })
    },
    // 点击表单按钮
    saveOrUpdate() {
      // 表单预校验
      this.$refs.FormRef.validate(async valid => {
        if (!valid) return
        // 判断是添加还是修改操作
        if (this.isAdd) this.addSemester()
        else this.editSemester()
      })
    },
    // 处理主学期设置事件
    async handleCurrentSemesterChange() {
      // 判断主学期有没有发生变化
      if (this.selectSemesterId === this.currentSemesterId) return
      // 发生变化，发送请求更新主学期
      await setCurrentSemester(this.selectSemesterId)
    },
    // 添加学期
    async addSemester() {
      if (await isConfirm('添加后将无法修改，是否继续？')) {
        // 发送请求，添加学期
        await addSemester(this.form)
        // 主学期处理操作
        this.handleCurrentSemesterChange()
        this.$message.success('添加成功')
        // 跳转至上一个路由
        this.$router.go(-1)
      }
    },
    // 修改学期
    async editSemester() {
      if (await isConfirm('确认提交？')) {
        // 发送请求，修改学期
        await updateSemester(this.form)
        // 主学期处理操作
        this.handleCurrentSemesterChange()
        this.$message.success('修改成功')
        // 跳转至上一个路由
        this.$router.go(-1)
      }
    },
    // 下拉选择器值变化触发事件
    async handleSelectChange() {
      if (await isConfirm('确认修改该学期为当前学期')) return
      // 取消，对下拉选择器重新赋值
      this.selectSemesterId = this.currentSemesterId
    }
  }
}
</script>

<style scoped>
.el-input {
  width: 400px;
}
.el-form-item {
  margin: 0 0 50px -30px;
}
</style>
